<template>
  <div class="selfInfo">
    <div class="info-head">
      <img class="img" :src="imgUrl" alt="" />
      <el-button type="primary" @click="dialog1 = true" class="upload">
        上传头像
        <el-icon class="el-icon--right"><Upload /></el-icon>
      </el-button>
      <el-dialog v-model="dialog1" title="上传头像">
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="updateImg"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-button
          type="primary"
          @click="
            commmit();
            dialog1 = flase;
          "
          >确认</el-button
        >
        <el-button @click="dialog1 = flase">取消</el-button>
      </el-dialog>
    </div>
    <div class="info-detail">
      <el-table
        class="info-table"
        :data="headers"
        :show-header="false"
        border
        stripe
      >
        <el-table-column prop="label" width="360px"> </el-table-column>
        <el-table-column prop="value" width="360px"> </el-table-column>
      </el-table>
    </div>
    <el-button type="primary" @click="dialogFormVisible = true" class="edit-btn"
      >修改个人信息</el-button
    >
    <el-dialog v-model="dialogFormVisible" title="修改个人信息" class="dialog">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-col :span="10">
            <el-input v-model="currentUser.name" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item
          label="性别"
          :label-width="formLabelWidth"
          style="width: 46%"
        >
          <el-col :span="15">
            <el-radio-group v-model="currentUser.gender">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-col :span="5">
            <el-input v-model="currentUser.age" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth">
          <el-col :span="15">
            <el-input v-model="currentUser.identityNumber" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-col :span="15">
            <el-input v-model="currentUser.phoneNumber" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-col :span="15">
            <el-input v-model="currentUser.email" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="资质" :label-width="formLabelWidth">
          <el-col :span="15">
            <el-input v-model="currentUser.qualification" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-col :span="15">
            <el-input v-model="currentUser.department" autocomplete="off" />
          </el-col>
        </el-form-item>
        <el-form-item label="自我介绍" :label-width="formLabelWidth">
          <el-col :span="18">
            <el-input v-model="currentUser.introduction" autocomplete="off" />
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              onSubmit();
              dialogFormVisible = false;
            "
            >确认修改</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" >
import { recordData, recordSearch, user } from "@/interface/type";
import {
  editInfo,
  getArrange,
  getInfo,
  getRecord,
  upload,
  uploadAvatar,
} from "@/service/api";
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElUpload, UploadProps } from "element-plus";
import { Plus, Upload } from "@element-plus/icons-vue";
export default {
  components: {
    Upload,
  },
  setup() {
    let currentUser = ref(new user());
    let dialogFormVisible = ref(false);
    let dialog1 = ref(false);
    let imageUrl = ref("");
    let imgUrl = ref("");
    const transfer = (item: number) => {
      if (item === 1) {
        return "女";
      } else if (item === 0) {
        return "男";
      }
    };
    const formLabelWidth = "100px";
    const getPageInfo = () => {
      getInfo().then((res) => {
        currentUser.value = new user(res.data.result);
        console.log("currentUser", currentUser.value);
        if (currentUser.value.avatar === "") {
          currentUser.value.avatar = "default.jpg";
          imgUrl.value = require("@/assets/" + currentUser.value.avatar);
        } else {
          imgUrl.value = currentUser.value.avatar;
        }
        console.log("imgUrl", imgUrl.value);
        headers.push(
          {
            prop: "name",
            label: "姓名",
            value: currentUser.value.name,
          },
          {
            prop: "gender",
            label: "性别",
            value: transfer(currentUser.value.gender),
          },
          {
            prop: "age",
            label: "年龄",
            value: currentUser.value.age,
          },
          {
            prop: "identityNumber",
            label: "身份证号",
            value: currentUser.value.identityNumber,
          },
          {
            prop: "phoneNumber",
            label: "手机号",
            value: currentUser.value.phoneNumber,
          },
          {
            prop: "email",
            label: "邮箱",
            value: currentUser.value.email,
          },
          {
            prop: "qualification",
            label: "资质",
            value: currentUser.value.qualification,
          },
          {
            prop: "department",
            label: "部门",
            value: currentUser.value.department,
          },
          {
            prop: "introduction",
            label: "自我介绍",
            value: currentUser.value.introduction,
          }
        );
      });
      return 0;
    };

    const onSubmit = () => {
      editInfo(currentUser.value).then((res) => {});
    };
    const getUrl = (item: string) => {
      return require(item);
    };

    const handleAvatarSuccess: UploadProps["onSuccess"] = (
      response,
      uploadFile
    ) => {
      imageUrl.value = URL.createObjectURL(uploadFile.raw!);
    };

    const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("头像应该为jpg格式!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片需小于2MB!");
        return false;
      }
      return true;
    };
    let url = "";
    const updateImg = (val: any) => {
      let fd = new FormData();
      fd.append("source", val.file);
      upload(fd).then((res) => {
        url = res.data.result;
        console.log("url", url);
        if (url === "") {
          url = currentUser.value.avatar;
        }
        imageUrl.value = url;
        currentUser.value.avatar = url;
        imgUrl.value = url;
      });
    };

    const commmit = () => {
      const option = {
        url: url,
      };
      uploadAvatar(option).then((res) => {
        console.log("result", res.data);
      });
      location.reload();
    };
    getPageInfo();

    const headers = reactive<any>([]);
    console.log("Data", currentUser.value, headers.value);

    return {
      imgUrl,
      headers,
      handleAvatarSuccess,
      beforeAvatarUpload,
      imageUrl,
      updateImg,
      dialog1,
      commmit,
      currentUser,
      onSubmit,
      formLabelWidth,
      getUrl,
      getPageInfo,
      transfer,
      dialogFormVisible,
    };
  },
};
</script>

<style scoped lang="less">
.selfInfo {
  width: 100%;
  height: 100%;
  .info-head {
    position: absolute;
    display: flex;
    top: 50px;
    left: 40%;
    margin: auto;
    height: 200px;
    width: 200px;
    .img {
      width: 100%;
      display: block;
    }
    .upload {
      position: absolute;
      left: 222px;
      top: 168px;
    }
    .avatar-uploader .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
  .info-detail {
    position: absolute;
    width: 50%;
    top: 206px;
    left: 19%;
    margin: 50px;
    .form-item {
      position: absolute;
      right: 300px;
      word-wrap: break-word;
      word-break: normal;
    }
    .info-table {
      padding: 1em;
      border: 1em solid transparent;
      background: linear-gradient(white, white) padding-box,
        repeating-linear-gradient(
            -45deg,
            red 0,
            red 12.5%,
            transparent 0,
            transparent 25%,
            #58a 0,
            #58a 37.5%,
            transparent 0,
            transparent 50%
          )
          0/5em 5em;
    }
  }
  ::v-deep .el-table .cell {
    text-align: center;
  }

  .edit-btn {
    position: absolute;
    left: 43%;
    bottom: 100px;
  }
  .dialog {
    width: 60%;
  }
}
</style>
